
<template>
  <div style="display: flex;justify-content: center;flex-direction: column">
    <div class="div-box">
      <div ref="content" style="width:fit-content;height:fit-content;text-align: center;">
        <vue-qr
          :size="size"
          :text="value"
          :colorLight="bgColor"
          :colorDark="fgColor"
          :logoSrc="showLogo?logo: ''"
          :logoScale="40"
        >
        </vue-qr>
        <p v-if="stationName" style="font-size: 18px; font-weight: bold">{{stationName}}</p>
        <p v-if="deviceName">{{deviceName}}({{chargePort}})</p>
        <p v-if="decDeviceId">{{decDeviceId}}</p>
      </div>
    </div>
    <el-button type="primary" icon="el-icon-document" size="small" @click="downloadCode">下载二维码文字图片</el-button>
  </div>
</template>

<script>

import vueQr from 'vue-qr'
import html2canvas from 'html2canvas'

export default {
  name: 'Test',
  components: { vueQr },
  props:['text','logo','value', 'showLogo', 'stationName', 'deviceName', 'chargePort','decDeviceId'],
  data () {
    return {
      size: 300,
      bgColor: '#ffffff',
      fgColor: '#000000',
      // 二维码地址
      // logo图片
      logoSize: 0.20,
    }
  },
  created () {

  },
  mounted () {

  },
  methods: {
    downloadCode(){
      let content = this.$refs.content
      let scrollHeight = content.scrollHeight
      let scrollWidth = content.scrollWidth
      let scrollTop = this.$el.scrollTop
      html2canvas(content, {
        //scale: window.devicePixelRatio*2,
        scale: window.devicePixelRatio,
        useCORS: true, //开启跨域配置，但和allowTaint不能共存
        width: scrollWidth,
        height: scrollHeight,
        windowWidth: document.body.scrollWidth,
        windowHeight: document.body.scrollHeight,
        x: 0,
        y: scrollTop
      }).then((canvas) => {
        this.operType = 'edit'
        let dataURL = canvas.toDataURL("image/jpg");
        let link = document.createElement("a");
        link.href = dataURL;
        let filename = `${this.stationName + '-' + this.deviceName + '-' + this.chargePort}.jpg`;  //文件名称
        link.setAttribute("download", filename);
        link.style.display = "none"; //a标签隐藏
        document.body.appendChild(link);
        link.click();
      })
    }
  }
}
</script>

<style>
.div-box {
  width:fit-content;
  height:fit-content;
  padding: 2px;
  border: 1px dashed #f69c55;
  position: relative;
  text-align: center;
  margin-bottom: 5px;
}
</style>
